<template>
	<view class="auth-other">
        <text class="auth-other-title">手机验证码登录</text>
		<uv-input border="surround" type="number" maxLength="11" style="margin:16px 0" placeholder="手机号码" prefixIcon="phone" v-model="mobile">		
		</uv-input>
		<uv-input border="surround" type="number" style="margin:16px 0" placeholder="输入验证码" prefixIcon="lock-open" v-model="code">
			<!-- vue3模式下必须使用v-slot:suffix -->
			<template v-slot:suffix>
				<uv-code
					ref="uCode"
					@change="codeChange"
					seconds="60"
					changeText="X秒重新获取"
				></uv-code>
				<uv-button
					@click="getCode"
					:text="tips"
					type="success"
					size="mini"
				></uv-button>
			</template>
		</uv-input>
        <uv-button shape="circle" type="primary" @click="sureOtherAuth" :disabled="(!mobile && !code)">确认登录</uv-button>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
let mobile = ref<any>('')
let code = ref<any>('')
const uCode = ref()
const tips = ref<any>('')

const codeChange = (text : any) => {
    tips.value = text;
}

const getCode = () => {
    if(mobile.value == ''){
        uni.showToast('请输入手机号码');
        return
    }
    if(mobile.value.length != 11){
        uni.showToast('手机号码有误');
        return
    }
    if (uCode.value.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
            title: '正在获取验证码'
        })
        setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.showToast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            uCode.value.start();
        }, 2000);
    } else {
        uni.showToast('倒计时结束后再发送');
    }
}
const sureOtherAuth = () => {

}
</script>
<style>

</style>